<route lang="json5">
{
  path: '/news',
  meta: {
    title: '新闻资讯',
    layout: 'pc-default',
  },
}
</route>

<template>
  <div class="news-page">
    <!-- Banner Section -->
    <section class="page-banner">
      <div class="container-box">
        <h1 class="banner-title">新闻资讯</h1>
        <p class="banner-subtitle">关注行业动态，了解最新资讯</p>
      </div>
    </section>

    <!-- Content Section -->
    <section class="news-content">
      <div class="container-box">
        <div class="news-layout">
          <!-- Main Content -->
          <div class="news-main">
            <!-- Filter Bar -->
            <div class="filter-bar">
              <div class="filter-categories">
                <el-button
                  v-for="category in categories"
                  :key="category.value"
                  :type="activeCategory === category.value ? 'primary' : 'default'"
                  size="small"
                  @click="filterByCategory(category.value)"
                >
                  {{ category.label }}
                </el-button>
              </div>

              <div class="filter-search">
                <el-input
                  v-model="searchKeyword"
                  placeholder="搜索新闻..."
                  @keyup.enter="searchNews"
                >
                  <template #suffix>
                    <el-icon class="el-input__icon" @click="searchNews">
                      <Search />
                    </el-icon>
                  </template>
                </el-input>
              </div>
            </div>

            <!-- Featured News -->
            <div v-if="featuredNews && !searchKeyword" class="featured-news">
              <div class="featured-card" @click="router.push(`/news/${featuredNews.id}`)">
                <div class="featured-image">
                  <el-image :src="featuredNews.image" :alt="featuredNews.title" fit="cover" lazy />
                  <div class="featured-tag">置顶</div>
                </div>
                <div class="featured-content">
                  <div class="featured-meta">
                    <el-tag type="danger" size="small">{{ featuredNews.category }}</el-tag>
                    <span class="featured-date">{{ formatDate(featuredNews.date) }}</span>
                  </div>
                  <h2 class="featured-title">{{ featuredNews.title }}</h2>
                  <p class="featured-summary">{{ featuredNews.summary }}</p>
                  <div class="featured-stats">
                    <span
                      ><el-icon><View /></el-icon> {{ featuredNews.views }}</span
                    >
                    <span
                      ><el-icon><ChatDotRound /></el-icon> {{ featuredNews.comments }}</span
                    >
                  </div>
                </div>
              </div>
            </div>

            <!-- News List -->
            <div class="news-list">
              <div
                v-for="article in filteredNews"
                :key="article.id"
                class="news-item"
                @click="router.push(`/news/${article.id}`)"
              >
                <div class="news-image">
                  <el-image :src="article.image" :alt="article.title" fit="cover" lazy />
                </div>

                <div class="news-info">
                  <div class="news-meta">
                    <el-tag :type="getCategoryType(article.category)" size="small">
                      {{ article.category }}
                    </el-tag>
                    <span class="news-date">{{ formatDate(article.date) }}</span>
                  </div>

                  <h3 class="news-title">{{ article.title }}</h3>
                  <p class="news-summary">{{ article.summary }}</p>

                  <div class="news-stats">
                    <span
                      ><el-icon><View /></el-icon> {{ article.views }}</span
                    >
                    <span
                      ><el-icon><ChatDotRound /></el-icon> {{ article.comments }}</span
                    >
                    <span
                      ><el-icon><Star /></el-icon> {{ article.likes }}</span
                    >
                  </div>
                </div>
              </div>
            </div>

            <!-- Pagination -->
            <div class="pagination-wrapper">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="totalCount"
                :page-sizes="[10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>

          <!-- Sidebar -->
          <div class="news-sidebar">
            <!-- Hot News -->
            <div class="sidebar-section">
              <h3 class="sidebar-title">热门资讯</h3>
              <div class="hot-list">
                <div
                  v-for="(item, index) in hotNews"
                  :key="item.id"
                  class="hot-item"
                  @click="router.push(`/news/${item.id}`)"
                >
                  <div class="hot-rank" :class="{ 'top-3': index < 3 }">{{ index + 1 }}</div>
                  <div class="hot-content">
                    <h4 class="hot-title">{{ item.title }}</h4>
                    <div class="hot-meta">
                      <span class="hot-views">{{ item.views }} 浏览</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Categories -->
            <div class="sidebar-section">
              <h3 class="sidebar-title">分类导航</h3>
              <div class="category-list">
                <div
                  v-for="category in categories.slice(1)"
                  :key="category.value"
                  class="category-item"
                  :class="{ active: activeCategory === category.value }"
                  @click="filterByCategory(category.value)"
                >
                  <span class="category-name">{{ category.label }}</span>
                  <span class="category-count">{{ category.count }}</span>
                </div>
              </div>
            </div>

            <!-- Archive -->
            <div class="sidebar-section">
              <h3 class="sidebar-title">文章归档</h3>
              <div class="archive-list">
                <div
                  v-for="archive in archives"
                  :key="archive.id"
                  class="archive-item"
                  @click="filterByArchive(archive.value)"
                >
                  <span class="archive-name">{{ archive.label }}</span>
                  <span class="archive-count">{{ archive.count }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  import { Search, View, ChatDotRound, Star } from '@element-plus/icons-vue';

  const router = useRouter();

  // 响应式状态
  const activeCategory = ref('all');
  const searchKeyword = ref('');
  const currentPage = ref(1);
  const pageSize = ref(10);
  const totalCount = ref(85);

  // 分类数据
  const categories = [
    { label: '全部', value: 'all', count: 85 },
    { label: '政策解读', value: 'policy', count: 25 },
    { label: '技术前沿', value: 'technology', count: 20 },
    { label: '安全管理', value: 'safety', count: 18 },
    { label: '培训动态', value: 'training', count: 15 },
    { label: '行业资讯', value: 'industry', count: 12 },
  ];

  // 归档数据
  const archives = [
    { id: 1, label: '2024年1月', value: '2024-01', count: 15 },
    { id: 2, label: '2023年12月', value: '2023-12', count: 18 },
    { id: 3, label: '2023年11月', value: '2023-11', count: 22 },
    { id: 4, label: '2023年10月', value: '2023-10', count: 16 },
    { id: 5, label: '2023年9月', value: '2023-09', count: 14 },
  ];

  // 置顶新闻
  const featuredNews = {
    id: 1,
    title: '2024年建筑行业发展新趋势：智能建造引领未来',
    summary:
      '随着科技的不断发展，建筑行业正经历着前所未有的变革。智能建造技术的应用，不仅提高了施工效率，还大大提升了建筑质量和安全性...',
    image: '/src/assets/images/featured-news.jpg',
    category: '技术前沿',
    date: new Date('2024-01-22'),
    views: 2580,
    comments: 38,
    likes: 156,
  };

  // 新闻列表数据
  const newsList = [
    {
      id: 2,
      title: '建筑工人技能提升计划正式启动',
      summary:
        '为提高建筑工人技能水平，促进建筑行业高质量发展，我省正式启动建筑工人技能提升计划...',
      image: '/src/assets/images/news-1.jpg',
      category: '培训动态',
      date: new Date('2024-01-20'),
      views: 1245,
      comments: 22,
      likes: 89,
    },
    {
      id: 3,
      title: '新版建筑安全生产标准发布实施',
      summary:
        '住建部发布新版建筑安全生产标准，进一步规范建筑施工安全管理，保障作业人员生命安全...',
      image: '/src/assets/images/news-2.jpg',
      category: '政策解读',
      date: new Date('2024-01-18'),
      views: 1567,
      comments: 31,
      likes: 112,
    },
    {
      id: 4,
      title: '绿色建筑技术应用案例分析',
      summary: '通过实际案例分析绿色建筑技术的应用效果，探讨可持续发展在建筑行业中的重要作用...',
      image: '/src/assets/images/news-3.jpg',
      category: '技术前沿',
      date: new Date('2024-01-15'),
      views: 987,
      comments: 18,
      likes: 67,
    },
    {
      id: 5,
      title: '建筑施工现场安全检查要点解析',
      summary: '详细解析建筑施工现场安全检查的重点内容和注意事项，帮助企业做好安全管理工作...',
      image: '/src/assets/images/news-4.jpg',
      category: '安全管理',
      date: new Date('2024-01-12'),
      views: 1334,
      comments: 25,
      likes: 95,
    },
    {
      id: 6,
      title: '装配式建筑发展现状与前景',
      summary: '分析装配式建筑在我国的发展现状，展望其未来发展前景和面临的挑战...',
      image: '/src/assets/images/news-5.jpg',
      category: '行业资讯',
      date: new Date('2024-01-10'),
      views: 756,
      comments: 12,
      likes: 43,
    },
  ];

  // 热门新闻
  const hotNews = [
    { id: 1, title: '2024年建筑行业发展新趋势', views: 2580 },
    { id: 3, title: '新版建筑安全生产标准发布', views: 1567 },
    { id: 4, title: '建筑施工现场安全检查要点', views: 1334 },
    { id: 2, title: '建筑工人技能提升计划启动', views: 1245 },
    { id: 5, title: '装配式建筑发展现状与前景', views: 987 },
  ];

  // 计算属性
  const filteredNews = computed(() => {
    let filtered = [...newsList];

    // 按分类过滤
    if (activeCategory.value !== 'all') {
      filtered = filtered.filter(
        (news) => news.category === getCategoryLabel(activeCategory.value),
      );
    }

    // 按关键词搜索
    if (searchKeyword.value) {
      const keyword = searchKeyword.value.toLowerCase();
      filtered = filtered.filter(
        (news) =>
          news.title.toLowerCase().includes(keyword) ||
          news.summary.toLowerCase().includes(keyword),
      );
    }

    return filtered;
  });

  // 方法
  const formatDate = (date: Date) => {
    return new Intl.DateTimeFormat('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    }).format(date);
  };

  const getCategoryType = (category: string) => {
    const typeMap = {
      政策解读: 'danger',
      技术前沿: 'primary',
      安全管理: 'warning',
      培训动态: 'success',
      行业资讯: 'info',
    };
    return typeMap[category] || 'default';
  };

  const getCategoryLabel = (value: string) => {
    const category = categories.find((cat) => cat.value === value);
    return category ? category.label : '';
  };

  const filterByCategory = (category: string) => {
    activeCategory.value = category;
    currentPage.value = 1;
  };

  const filterByArchive = (archive: string) => {
    // 这里可以实现按时间归档的过滤逻辑
    console.log('Filter by archive:', archive);
  };

  const searchNews = () => {
    currentPage.value = 1;
  };

  const handleSizeChange = (size: number) => {
    pageSize.value = size;
    currentPage.value = 1;
  };

  const handleCurrentChange = (page: number) => {
    currentPage.value = page;
  };
</script>

<style lang="scss" scoped>
  .news-page {
    min-height: 100vh;
  }

  // Page Banner
  .page-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 0;
    text-align: center;

    .banner-title {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 16px;

      @media (max-width: 768px) {
        font-size: 2rem;
      }
    }

    .banner-subtitle {
      font-size: 1.3rem;
      opacity: 0.9;
    }
  }

  // News Content
  .news-content {
    padding: 60px 0;

    .news-layout {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 40px;

      @media (max-width: 1024px) {
        grid-template-columns: 1fr;
      }
    }
  }

  // Filter Bar
  .filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 16px;
      align-items: stretch;
    }

    .filter-categories {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .filter-search {
      width: 250px;

      @media (max-width: 768px) {
        width: 100%;
      }

      .el-input__icon {
        cursor: pointer;

        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
  }

  // Featured News
  .featured-news {
    margin-bottom: 40px;

    .featured-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
      }

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }

      .featured-image {
        position: relative;

        .el-image {
          width: 100%;
          height: 300px;

          @media (max-width: 768px) {
            height: 200px;
          }
        }

        .featured-tag {
          position: absolute;
          top: 16px;
          left: 16px;
          background: #ff4757;
          color: white;
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 500;
        }
      }

      .featured-content {
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        @media (max-width: 768px) {
          padding: 20px;
        }

        .featured-meta {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 16px;

          .featured-date {
            color: #666;
            font-size: 14px;
          }
        }

        .featured-title {
          font-size: 1.8rem;
          color: #2c3e50;
          margin-bottom: 16px;
          line-height: 1.4;

          @media (max-width: 768px) {
            font-size: 1.4rem;
          }
        }

        .featured-summary {
          color: #666;
          line-height: 1.6;
          margin-bottom: 20px;
          flex: 1;
        }

        .featured-stats {
          display: flex;
          gap: 20px;
          color: #999;
          font-size: 14px;

          span {
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }
      }
    }
  }

  // News List
  .news-list {
    .news-item {
      display: flex;
      gap: 20px;
      background: white;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      cursor: pointer;
      transition: all 0.3s;
      border: 1px solid #f0f0f0;

      &:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        border-color: var(--el-color-primary);
      }

      @media (max-width: 768px) {
        flex-direction: column;
      }

      .news-image {
        flex-shrink: 0;

        .el-image {
          width: 200px;
          height: 140px;
          border-radius: 8px;

          @media (max-width: 768px) {
            width: 100%;
            height: 200px;
          }
        }
      }

      .news-info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .news-meta {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 12px;

          .news-date {
            color: #666;
            font-size: 14px;
          }
        }

        .news-title {
          font-size: 1.3rem;
          color: #2c3e50;
          margin-bottom: 12px;
          line-height: 1.4;
        }

        .news-summary {
          color: #666;
          line-height: 1.6;
          margin-bottom: 16px;
          flex: 1;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .news-stats {
          display: flex;
          gap: 16px;
          color: #999;
          font-size: 14px;

          span {
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }
      }
    }
  }

  // Pagination
  .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }

  // Sidebar
  .news-sidebar {
    .sidebar-section {
      background: white;
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

      .sidebar-title {
        font-size: 1.2rem;
        color: #2c3e50;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid var(--el-color-primary);
      }
    }

    // Hot News
    .hot-list {
      .hot-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 0;
        cursor: pointer;
        transition: all 0.3s;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          background: #f8f9fa;
          margin: 0 -12px;
          padding: 12px;
          border-radius: 8px;
        }

        .hot-rank {
          width: 20px;
          height: 20px;
          background: #ddd;
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: 600;
          flex-shrink: 0;

          &.top-3 {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
          }
        }

        .hot-content {
          flex: 1;
          min-width: 0;

          .hot-title {
            font-size: 14px;
            color: #2c3e50;
            margin-bottom: 4px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .hot-meta {
            .hot-views {
              color: #999;
              font-size: 12px;
            }
          }
        }
      }
    }

    // Categories & Archives
    .category-list,
    .archive-list {
      .category-item,
      .archive-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        cursor: pointer;
        transition: all 0.3s;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        &:hover,
        &.active {
          color: var(--el-color-primary);
          background: var(--el-color-primary-light-9);
          margin: 0 -12px;
          padding: 10px 12px;
          border-radius: 8px;
        }

        .category-name,
        .archive-name {
          font-size: 14px;
        }

        .category-count,
        .archive-count {
          font-size: 12px;
          color: #999;
          background: #f0f0f0;
          padding: 2px 8px;
          border-radius: 12px;
        }

        &:hover .category-count,
        &:hover .archive-count,
        &.active .category-count,
        &.active .archive-count {
          background: var(--el-color-primary);
          color: white;
        }
      }
    }
  }

  @media (max-width: 1024px) {
    .news-sidebar {
      .sidebar-section {
        margin-bottom: 20px;
      }
    }
  }
</style>
